<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<link rel="Stylesheet" type="text/css" href="/Mass_template/common/colpick/css/colpick.css" />
<script type="text/javascript" src="/Mass_template/common/colpick/js/colpick.js"></script>
<style>
.picker {
	margin:0;
	padding:0;
	border:0;
	width:60px;
	height:20px;
 	border-right:20px solid #ccc;
	border-left:1px solid #ccc;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	line-height:20px;
}
</style>
<script>
	$(document).ready(function() {
		
		//sheet 초기화  
		createIBSheet2(document.getElementById("viewArea"),"mySheet","100%","400px");
		
		var cfg = {SearchMode:smLazyLoad,Page:30};
		var headers = [
			{Text:"모델번호|평형|단가(A)|판매가(B)\nA * 1.03 / 100|현금구입가(C)\n A * 0.9 / 100|할부구입가(D)\nA * 0.93 / 100|현금부담액\nB-C|할부부담액\nB-D", Align:"Center"}
		];
		var info = {Sort:1,ColMove:1,ColResize:1,HeaderCheck:0};
		var cols = [
			{Type:"Text",Width:130, Wrap:1,MultiLineText:1},
			{Type:"Text",Width:100,ColMerge:0,Ellipsis:1},
			{Type:"Int",Width:80,SaveName:"A", Align:"Right",ColMerge:0},
			{Type:"AutoSum",Width:85,SaveName:"B",Format:"#,##0.00",CalcLogic:"|A|*1.03/100", Align:"Right",ColMerge:0},
			{Type:"AutoSum",Width:85,SaveName:"C",Format:"#,##0.00",CalcLogic:"|A|*0.9/100", Align:"Right",ColMerge:0},
			{Type:"AutoSum",Width:85,SaveName:"D",Format:"#,##0.00",CalcLogic:"|A|*0.93/100", Align:"Right",ColMerge:0},
			{Type:"AutoAvg",Width:85,Format:"#,##0.00",CalcLogic:"|B|-|C|",ColMerge:1, Align:"Right",ColMerge:0},
			{Type:"AutoAvg",Width:85,Format:"#,##0.00",CalcLogic:"|B|-|D|", Align:"Right",ColMerge:0}
		];

		mySheet.SetConfig(cfg);
		mySheet.InitHeaders(headers,info);
		mySheet.InitColumns(cols);
		
		mySheet.SetAutoRowHeight(1);
		mySheet.SetEditEnterBehavior("down");

		mySheet.FitColWidth();
		
		doAction("search");
		
		setTimeout("inputValue()", 500);
	});
	
	function inputValue() {
		mySheet.SetCellValue(1, 0, "두산건설\n두산건설");
		mySheet.SetCellText(1, 1, "1234567890ABCDEFGHIJKLMNOPQRSTUVSTXYZ");
	}
	
	/*Sheet 각종 처리*/
	function doAction(sAction) {
		
		switch(sAction) {
			case "search":		//조회
				mySheet.DoSearch("../data/sheet_data2.xml");
				break;
			case "subsum":
			    var info = [{StdCol:0, SumCols:"2|3|4|5", ShowCumulate:0,Sort:0,CaptionCol:0}];
			   	mySheet.ShowSubSum(info); 
			   	doAction('search');
		    break;
		}
	}
	
	
</script>
<title>한 컬럼에 문자열 표현 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/sheetNavi.jsp" %>
	<div id="title">한 컬럼에 문자열 표현 예제</div>
	<div id="desc">
		Wrap는 컬럼너비에 따라 자동 줄바꿈 여부를 설정한다. 기본값으로 0(적용하지 않음)으로 설정된다.<br>
		<br>
		Ellipsis는 컬럼 텍스트의 표시글자가 잘릴경우 말줄임 여부를 설정한다. 기본값으로 0(적용하지 않음)으로 설정된다.<br>
		<br>
		AutoRowHeight 메서드는 데이터 행의 높이를 자동으로 조정할지 여부를 확인하거나 설정한다.<br>
		이 속성이 1이면, 행의 글자를 모두 표시할수 있도록 행의 높이를 자동으로 높이거나 줄인다.<br>
		행의 높이가 변경되는 경우는 다음과 같다.<br>
		&nbsp;&nbsp;1) InitColumns에 컬럼속성을 MultiLineText:1로 설정하여 키보드로 편집도중 Shift+Enter 키를 눌러 줄바꿈된 글자를 설정하는 경우<br>
		&nbsp;&nbsp;2) InitColumns에 컬럼속성을 Wrap:1로 설정하여 컬럼너비조정에 따라 글자가 자동으로 줄바꿈된 경우<br>
		&nbsp;&nbsp;3) 줄바꿈된 글자를 삭제하여 행의 높이가 줄어드는 경우<br>
		&nbsp;&nbsp;4) SetCellText, SetCellValue 로 줄바꿈된 글자를 설정한 경우<br>
		&nbsp;&nbsp;5) 조회, 엑셀업로드로 줄바꿈된 글자를 로드하는 경우<br>
		이 속성이 0이면, 행의 높이는 SetDataRowHeight 속성으로 설정된 높이인 한줄 높이로 고정된다.<br>
		<br>
		MultiLineText는 Type이 "Text"인 경우 다중라인 입력여부를 설정한다. 기본적으로 0값이 설정된다.<br>
		<br>
		EditEnterBehavior()메서드는 편집중 엔터키 입력에 대한 동작 설정<br>
		<table border="1" style="border-spacing: 1px; border-style: none; border-color: #CCCCCC;">
			<tr style="text-align:center">
				<td width="70">설정값</td>
				<td width="300">내용</td>
			</tr>
			<tr>
				<td>tab</td>
				<td>Tab Key를 누른 것처럼 옆 셀로 이동</td>
			</tr>
			<tr>
				<td>down</td>
				<td>Down Key를 누른 것처럼 아래 셀로 이동</td>
			</tr>
			<tr>
				<td>newline</td>
				<td>줄바꿈되어 개행 처리 됨</td>
			</tr>
			<tr>
				<td>none</td>
				<td>아무런 동작 하지 않음(Default)</td>
			</tr>
		</table>
	</div>

	<div id="functionArea">
		<div>시트 생성시 열을 설정하는 부분에서 Cursor를 지정할 수 있다.</div>
		<div>var cols = [<br>
		&nbsp;&nbsp;&nbsp;&nbsp;{Type:"Text",Width:130,<font color="#FF0000"><u>Wrap:1,MultiLineText:1</u></font>},<br>
		&nbsp;&nbsp;&nbsp;&nbsp;{Type:"Text",Width:100,ColMerge:0,<font color="#FF0000"><u>Ellipsis:1</u></font>},<br>
		&nbsp;&nbsp;&nbsp;&nbsp;{Type:"Int",Width:80,SaveName:"A", Align:"Right",ColMerge:0},<br>
		&nbsp;&nbsp;&nbsp;&nbsp;.<br>
		&nbsp;&nbsp;&nbsp;&nbsp;.<br>
		];<br>
		<br>
		mySheet.SetConfig(cfg);<br>
		<br>
		<font color="#FF0000"><u>mySheet.SetAutoRowHeight(1);</u></font><br>
		<font color="#FF0000"><u>mySheet.SetEditEnterBehavior("down");</u></font><br>
		</div>
	</div>
	
	<div id="viewArea">
	</div>
</div>
</body>
</html>